<!--@Author: ZL-->
<!--@Date:   2019/2/21-->
<!--@Last Modified by:   ZL-->
<!--@Last Modified time: $ $-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>市政单位管理</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--引入样式-->
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/metronic-5/vendors.bundle.css" th:href="@{/agcloud/framework/js-lib/metronic-5/vendors.bundle.css}">
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/common/css/metronic.css" th:href="@{/agcloud/framework/ui-private/default/common/css/metronic.css}">
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.css" th:href="@{/agcloud/framework/js-lib/element-2/element.css}">
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/common/css/layout.css" th:href="@{/agcloud/framework/ui-private/default/common/css/layout.css}">
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/blue/css/theme.css" th:href="@{/agcloud/framework/ui-private/default/blue/css/theme.css}">
  <link rel="stylesheet" href="../../../../../static/agcloud/civicism/css/index.css" th:href="@{/civicism/css/index.css}">
  <script>
    var ctx = '[[@{/}]]';
  </script>
</head>
<body class="">
<div id="managementPage"
     v-cloak
     class="clearfix"
     data-scrollable="true"
     v-loading.fullscreen.lock="loading">
  <!--左侧树 start-->
  <div class="tree-left">
    <!--<el-input
            class="search-org"
            placeholder="搜索关键词"
            v-model="filterText5">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
      <i slot="suffix" class="el-input__icon el-icon-close" @click="filterText5='';"></i>
    </el-input>-->
    <el-tabs v-model="treeActive" type="card">
      <el-tab-pane :label="item.itemName" :name="item.itemCode" v-for="(item,index) in unitCategoryTypeList">
        <div v-if="treeActive == item.itemCode">
          <el-tree
                  v-show="leftOrgTree2"
                  :expand-on-click-node="false"
                  :style="{height:treeLeftHeight+'px',overflow: 'auto'}"
                  highlight-current
                  :props="defaultProps"
                  :load="loadNode1"
                  node-key="orgId"
                  :default-expanded-keys="treeShowNode"
                  lazy
                  ref="treeLeft"
                  @node-click="clickTreeNode"
                  @node-contextmenu="treeNodeRightClick">
          <span class="custom-tree-node" slot-scope="scope">
            <span :title="scope.data.orgName">
                <i :class="scope.data.orgProperty=='u'?'flaticon-map'
                :scope.data.orgProperty=='g'?'flaticon-users-1'
                :scope.data.orgProperty=='d'?'fa fa-folder'
                :'fa fa-user'"></i>{{ scope.data.orgName }}
            </span>
          </span>
          </el-tree>
        </div>
        <div v-show="(!leftOrgTree2)"
             class="search-list"
             :style="{height:treeLeftHeight+'px',overflow: 'auto'}">
          <div key="searchOrg">
            <p class="search-title">组织列表：</p>
            <el-tree
                    :data="searchOrgTree"
                    :props="defaultProps"
                    node-key="orgId"
                    highlight-current
                    ref="selTtreeLeft"
                    @node-click="clickTreeNode"
                    @node-contextmenu="treeNodeRightClick">
              <span class="custom-tree-node" slot-scope="scope">
                <span>
                    <i :class="
                    scope.data.iconSkin=='unit'?'flaticon-map'
                    :scope.data.iconSkin=='group'?'flaticon-users-1'
                    :scope.data.iconSkin=='department'?'fa fa-folder'
                    :'fa fa-user'"></i>{{ scope.data.name }}
                </span>
              </span>
            </el-tree>
          </div>
          <div key="searchMan">
            <p class="search-title">人员列表：</p>
            <el-tree
                    :data="searchManTree"
                    :props="defaultProps"
                    node-key="userId"
                    @node-click="showManInfo"
                    ref="selTtreeLeft">
              <span class="custom-tree-node" slot-scope="scope">
                <span>
                    <i :class="
                    scope.data.iconSkin=='unit'?'flaticon-map'
                    :scope.data.iconSkin=='group'?'flaticon-users-1'
                    :scope.data.iconSkin=='department'?'fa fa-folder'
                    :'fa fa-user'"></i>{{ scope.data.name }}
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
  <!--左侧树 end-->
  <!--右侧content start-->
  <div class="tree-right">
    <div class="right-title">
      <span class="depart-name">{{orgName}}</span>
      <i class="la la-chevron-circle-down"></i>
      <span class="staff-count"><!--（{{userCount}}人）--></span>
    <!--  <i class="flaticon-questions-circular-button float-right"></i>-->
    </div>
    <div class="right-content">
      <!--<div class="right-nav">
        <el-button v-show="navItemObj.length>1" type="primary" size="mini" round plain @click="returnItem">返回上一级</el-button>
        <span class="bread-nav">
          <i class="fa fa-map-marker-alt map-icon"></i>
          <a v-for="(item,index) in navItemObj"
             :class="index == (navItemObj.length-1) ? 'last-nav':''"
             @click="breadNavClick(item.id,item.pId,item.name,index)"
             href="#">{{item.name}}
            <i v-if="index < (navItemObj.length-1)" class="next-node">></i>
          </a>
        </span>
      </div>-->
      <!--下级部门 start-->
      <div class="children-apart">
       <!-- <div class="p-header"><i class="fa fa-folder"></i>直属下级部门</div>-->
        <div class="right-btn-group opt-btn">
          <el-button type="button"  @click="addDept">新增</el-button>
          <el-button type="button"  @click="updateDept">批量修改</el-button>
          <el-button type="danger" :loading="delLoading" @click="delDept" >批量删除</el-button>
        </div>
        <div>
          <el-table
                  v-loading="deptDataLoadig"
                  :data="listOrgDeptData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                  @selection-change="handleSelectionChange"
                  highlight-current-row
                  style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    label="部门名称">
              <template slot-scope="scope">
                <p class="apart-item">
                  <i class="fa fa-folder"></i>{{scope.row.orgName}}</p>
              </template>
            </el-table-column>
            <el-table-column
                    label="部门编号"
                    prop="orgCode"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="部门等级"
                    prop="orgRank"
                    width="150"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120">
              <template slot-scope="scope">
                <el-button type="text"  @click="updateDeptOneFn(scope.row)">修改</el-button>
                <el-button type="text"  @click="delDeptOne(scope.row)" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
            <div style="margin-top:15px;">
                <el-pagination v-if="listOrgDeptData.length>10" background align="right"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 50]"
                               :current-page="currentPage"
                               :page-size="PageSize"
                               layout="total,sizes, prev, pager, next, jumper"
                               :total="listOrgDeptData.length">
                </el-pagination>
            </div>
          <!--<span v-if="showOrgDeptMore"
                class="show-more-item"
                @click="showOrgDeptMoreItem()">查看全部<i class="la la-angle-down"></i></span>
          <span v-if="hideOrgDeptMore"
                class="show-more-item"
                @click="hideOrgDeptMoreItem()">收起<i class="la la-angle-up"></i></span>-->
        </div>
      </div>
      <!--下级部门  end-->
    </div>
  </div>
  <!--右侧content end-->
  <!--左侧树右键展开-->
  <div class="right-click-opt" v-show="showRightClick" @mouseleave="hideClickOpt">
    <!--<p><a style="color: #575962;" :href="ctx+'opu/om/org/export/orgAndUserInfo?parentOrgId='+orgIdP">导出</a></p>-->
   <!-- <p @click="treeExport">Excel导出</p>
    <p>
      <el-upload
        ref="uploadFileWin"
        class="upload-s-file"
        multiple
        :action="ctx+'opu/om/org/import/orgAndUserInfo'"
        :show-file-list="false"
        :http-request="importOrgAndUser"
        :file-list="fileList">
        <span type="primary" plain slot="trigger">Excel导入</span>
      </el-upload>
    </p>
    <p><a style="color: #575962;" :href="ctx+'opu/om/org/download/template?templateType=orgAndUser'">Excel模板</a></p>
    <p @click="clickApartItem('','u')">添加下级单位</p>
    <p @click="clickApartItem('','d')">添加下级部门</p>
    <p @click="clickApartItem('','g')">添加工作组</p>-->
    <p @click="addDept()">新增</p>
    <p @click="treeUpdateDeptFn()">修改</p>
    <p @click="treedelDeptFn()">删除</p>
  </div>
  <!--左侧树右键展开 end-->

  <!--选择用户部门弹窗 start-->
  <el-dialog title="选择部门" class="sel-apartment" :class="dialogSelApartment?'show':''" :visible.sync="dialogSelApartment" @closed="clearSelData()">
    <div class="tree-left float-left">
      <p class="sel-title">选择：</p>
      <el-input
              class="search-apartment"
              placeholder="搜索组织和岗位"
              v-model="filterText1">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <i slot="suffix" class="el-input__icon el-icon-close" @click="filterText1='';"></i>
      </el-input>
      <el-tree
              v-show="userOrgInfoFlag"
              :style="{height:fullHeight-400+'px',overflow:'auto'}"
              key="userOrgInfo"
              :expand-on-click-node="false"
              highlight-current
              :props="defaultProps"
              :load="loadNode2"
              node-key="id"
              show-checkbox
              :default-expanded-keys="apartCheckedExpanded"
              @check="changeApartmentChecked"
              :check-strictly=true
              lazy
              ref="selApartmentTree">
          <span class="custom-tree-node" slot-scope="scope">
            <span>
                <i :class="scope.data.iconSkin=='unit'?'flaticon-map'
                :scope.data.iconSkin=='group'?'flaticon-users-1'
                :scope.data.iconSkin=='department'?'fa fa-folder'
                :'fa fa-user'"></i>{{ scope.data.name }}
            </span>
          </span>
      </el-tree>
      <div v-show="(!userOrgInfoFlag)"
           key="searchUserOrgInfo"
           class="search-list"
           :style="{height:fullHeight-400+'px',overflow:'auto'}">
        <div key="userSearchOrgTree">
          <p class="search-title">组织列表：</p>
          <el-tree
                  :data="userSearchOrgTree"
                  :props="defaultProps"
                  node-key="id"
                  highlight-current
                  show-checkbox
                  @check="changeApartmentChecked"
                  ref="searchUserOrgD">
          <span class="custom-tree-node" slot-scope="scope">
            <span>
                <i :class="
                scope.data.iconSkin=='unit'?'flaticon-map'
                :scope.data.iconSkin=='group'?'flaticon-users-1'
                :scope.data.iconSkin=='department'?'fa fa-folder'
                :'fa fa-user'"></i>{{ scope.data.name }}
            </span>
          </span>
          </el-tree>
        </div>
        <div key="searchMan">
          <p class="search-title">岗位列表：</p>
          <el-tree
                  :data="userSearchPosTree"
                  :props="defaultProps"
                  node-key="id"
                  show-checkbox
                  @check="changeApartmentChecked"
                  ref="searchUserPosD">
          <span class="custom-tree-node" slot-scope="scope">
            <span>
                <i :class="
                scope.data.iconSkin=='unit'?'flaticon-map'
                :scope.data.iconSkin=='group'?'flaticon-users-1'
                :scope.data.iconSkin=='department'?'fa fa-folder'
                :'fa fa-user'"></i>{{ scope.data.name }}
            </span>
          </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="selected-apartm">
      <p class="sel-title">已选：</p>
      <div class="selected-list"
           :style="{height:fullHeight-350+'px',overflow:'auto'}">
        <p v-for="(item,index) in selApartmentList"
           :id="item.orgId"
           class="selected-item">{{item.name}} <i class="la la-close float-right" @click="removeSelOrg(item,index)"></i></p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveUserOrgSelInfo" :disabled="isDisabled">保存</el-button>
      <el-button @click="dialogSelApartment = false">取消</el-button>
    </div>
  </el-dialog>
  <!--选择用户部门弹窗 end-->

  <!-- 选择行政区域 @opened="expandAllRegionTree();" -->
  <el-dialog title="选择行政区域" class="sel-apartment" :class="dialogSetRegion?'show':''"
             :visible.sync="dialogSetRegion" @closed="clearSelRegionData();">
      <div class="tree-left float-left">
          <p class="sel-title">选择：</p>
          <el-input class="search-apartment" placeholder="搜索行政区域" v-model="filterText3">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <i slot="suffix" class="el-input__icon el-icon-close" @click="filterText3='';"></i>
          </el-input>
          <!--<el-button type="primary" size="medium" @click="closedAllRegionTree">折叠</el-button>-->
          <!--<el-button type="primary" size="medium" @click="expandAllRegionTree" style="margin-left: 5px;">展开</el-button>-->
          <el-tree
              :style="{height:fullHeight-400+'px',overflow:'auto'}"
              :data="setRegionTreeData"
              :props="defaultRegionProps"
              node-key="id"
              highlight-current
              @node-click="selRegion"
              :expand-on-click-node="false"
              :filter-node-method="filterRegionNode"
              :default-expanded-keys="setRegionExpanded"
              ref="setRegionTree">
              <span class="custom-tree-node" slot-scope="scope">
                  <span>
                      <i :class="'fa fa-folder'"></i>{{ scope.data.label }}
                  </span>
              </span>
          </el-tree>
      </div>
      <div class="selected-apartm">
          <p class="sel-title">已选：</p>
          <div class="selected-list" :style="{height:fullHeight-350+'px',overflow:'auto'}">
              <p v-for="(item,index) in selRegionList" :id="item.id"
                  class="selected-item">{{item.label}}
                  <i class="la la-close float-right" @click="removeSelRegion(item, index)"></i>
              </p>
          </div>
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveSelRegion">保存</el-button>
          <el-button @click="dialogSetRegion = false">取消</el-button>
      </div>
  </el-dialog>

    <!--文件导入结果信息-->
    <el-dialog title="导入文件信息" :visible.sync="importFileResultDialog">
        <el-table :data="importMessageList" height="350">
            <!--<el-table-column type="index" width="50"></el-table-column>-->
            <el-table-column label="导入结果信息">
                <template slot-scope="scope">
                    <span>{{ scope.row }}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

  <!--修改单位 str-->
  <el-dialog title="修改单位" :visible.sync="dialogUpdateDept">
    <el-form ref="unitCategoryForm" :model="unitCategoryForm"  :rules="unitCategoryFormRules" label-width="80px">
      <el-form-item label="单位类型" prop="selectVal">
        <el-select v-model="unitCategoryForm.selectVal" placeholder="请选择" style="width:95%;">
          <el-option
                  v-for="item in unitCategoryTypeList"
                  :key="item.itemCode"
                  :label="item.itemName"
                  :value="item.itemCode">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sureUpDateDept('unitCategoryForm')" :loading="upDateLoading">确定</el-button>
      <el-button @click="dialogUpdateDept = false">取消</el-button>
    </div>
  </el-dialog>
  <!--修改单位 end-->

  <!--新增单位 str-->
  <el-dialog title="新增单位" class="sel-apartment set-admin" :class="dialogAddDept?'show':''"  :visible.sync="dialogAddDept" @closed="clearSearchAdmin" width="70%">
    <div class="tree-left float-left">
      <p class="sel-title">选择：</p>
      <el-input class="search-org" style="width: 545px;" placeholder="搜索关键词" v-model="filterText">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <i slot="suffix" class="el-input__icon el-icon-close" @click="filterText='';"></i>
      </el-input>
     <!-- <el-button type="primary" size="medium" @click="closedAllDeptTree">折叠</el-button>
      <el-button type="primary" size="medium" @click="expandAllDeptTree">展开</el-button>-->
      <el-tree
              v-if="leftOrgTree"
              :style="{height:fullHeight-400+'px',overflow:'auto'}"
              :expand-on-click-node="false"
              highlight-current
              :props="defaultProps"
              :load="loadNode4"
              node-key="orgId"
              show-checkbox
              :default-expanded-keys="treeShowNode"
              @check="changeDeptChecked"
              @check-change="changeDeptSel"
              :check-strictly=true
              lazy
              ref="addDeptTree">
          <span class="custom-tree-node" slot-scope="scope">
            <span>
                <i :class="scope.data.iconSkin=='unit'?'flaticon-map'
                :scope.data.iconSkin=='group'?'flaticon-users-1'
                :scope.data.iconSkin=='department'?'fa fa-folder'
                :'fa fa-user'"></i>{{ scope.data.name }}
            </span>
          </span>
      </el-tree>
      <div v-if="(!leftOrgTree)" class="search-list" :style="{height:(treeLeftHeight-300)+'px',overflow: 'auto',marginTop:'15px'}">
        <div key="searchOrg">
          <p class="search-title">搜索结果：</p>
          <el-tree :data="searchOrgTree" :props="defaultProps" node-key="orgId" highlight-current ref="addDeptTree"
                   show-checkbox
                   :default-expanded-keys="treeShowNode"
                   @check="changeDeptChecked"
                   @check-change="changeDeptSel"
                   :check-strictly=true>
                <span class="custom-tree-node" slot-scope="scope">
                  <span>
                    <i :class="
                scope.data.iconSkin=='unit'?'flaticon-map'
                :scope.data.iconSkin=='group'?'flaticon-users-1'
                :scope.data.iconSkin=='department'?'fa fa-folder'
                :'fa fa-user'">
                    </i>{{ scope.data.name }}
                  </span>
                </span>
          </el-tree>
        </div>
        <!--<div key="searchMan">
          <p class="search-title">人员列表：</p>
          <el-tree :data="searchManTree" :props="defaultProps" node-key="userId" @node-click="showManInfo"
                   ref="selTtreeLeft">
                <span class="custom-tree-node" slot-scope="scope">
                  <span>
                    <i :class="
                scope.data.iconSkin=='unit'?'flaticon-map'
                :scope.data.iconSkin=='group'?'flaticon-users-1'
                :scope.data.iconSkin=='department'?'fa fa-folder'
                :'fa fa-user'">
                    </i>{{ scope.data.name }}
                  </span>
                </span>
          </el-tree>
        </div>-->
      </div>
    </div>
    <div class="selected-apartm">
      <p class="sel-title">已选：</p>
      <div class="selected-list"
           :style="{height:fullHeight-350+'px',overflow:'auto'}"
           :expand-on-click-node="false">
          <p v-for="(item,index) in setAdminList"
             :id="item.orgId"
             class="selected-item">{{item.name}}
            <i class="la la-close float-right" @click="removeSelDept(item,index)"></i>
          </p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveDept" :loading="isDisabled">保存</el-button>
      <el-button @click="dialogAddDept = false">取消</el-button>
    </div>
  </el-dialog>
  <!--新增单位 end-->

</div>
</body>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/jquery-v1/jquery.min.js" th:src="@{/agcloud/framework/js-lib/jquery-v1/jquery.min.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/vue-v2/vue.js" th:src="@{/agcloud/framework/js-lib/vue-v2/vue.js}"></script>
<!-- 引入组件库 -->
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.js" th:src="@{/agcloud/framework/js-lib/element-2/element.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/agcloud-lib/js/common.js" th:src="@{/agcloud/framework/js-lib/agcloud-lib/js/common.js}"></script>
<script src="../../static/civicism/js/index.js" type="text/javascript" th:src="@{/civicism/js/index.js}"></script>
<script src="../../../../../static/agcloud/opus/admin/common/js/axios.min.js" type="text/javascript" th:src="@{/agcloud/opus/admin/common/js/axios.min.js}"></script>
</html>